RequireJS学习笔记

如果有疑惑的地方，欢迎讨论，我是初学，希望能切磋和得到指点；

js加载会阻塞页面加载：

    //requirejs默认异步加载js文件；
    方法一、
        把script放到页面底部加载；
    方法二、
        <script defer async='true' scr=''></script>
        //IE支持defer
        

定义全局相对路径：

    方法一：
        <script data-main='scripts/main' src='scripts/require.js'></script>
        //自定义属性data-main指定网页程序的主模块--main.js文件;
        //data-main定义整个网页代码的入口（js文件的相对位置），以后require()此文件下的文件可以直接写文件名；
        //require.js文件位置是任意的；
        //定义了data-main的缺点：
        //    data-main只适用于页面只有一个脚本入口的情况；
        //    如果页面有多个脚本入口，并且与主模块加载的脚本之间有依赖关系，加载会随机报错；
        //    因为data-main定义的主模块内的require()模块是异步加载的，不阻塞页面加载，所以，随机出现脚本查找不到的错误--页面内与<script *data-main='' >同级的内联script脚本有可能优先于require(模块)加载完毕；
        //
        
    方法二：
        require.config({
            baseUrl:"scripts/"    
            //改变基目录，目录url从可以用相对/绝对位置；
        })
        //在主模块中使用require.config({})对模块的加载行为进行自定义；
        
    方法三：
        方法一、二都未设置时，默认以引用require.js的.html文件所在目录为相对根目录；

注意：用baseURL以相对位置修改，是相对于引用requirejs的html为基准定位的-----我是错了好多次,总是以为是主模块main.js的相对位置

忽略全局相对路径加载js

    //绕过baseUrl，以传统的方式查找脚本文件；
    
    方法一、
        require('*.js')    //加载路径以'.js'结尾；
        
    方法二、
        require('/**')    //加载路径以'/'开始；
        
    方法三、
        require('{http:|https:}')    //加载路径包含URL协议；
        
        

依赖关系：

    主模块：data-main属性值的js文件，是整个网站代码的入口，所有代码都从这儿开始运行；
    
    执行模块：
        require([],function(args){
            //require()异步加载；
            //[]表示所依赖模块的数组列表；
            /*function(){}回调函数，当指定模块都加载成功后被调用；
            *加载的模块以参数形式传入该函数中，从而在回调函数内部就可以使用这么模块；
            *参数和模块的数量和次序要一一对应;
            *或者通过arguments[]来调用依赖；
            */
        })
    
        
    在define()内部require()模块
        //如果需要在define()函数内部require()其它文件，需要将require.js作为依赖加载；
        

模块的定义（AMD规范）：

    /*模块的好处：避免全局命名空间污染--依赖关系以函数参数的形式注入；
    *如jqurey：使用模块加载就无需担心引用其它js库引起$符号的归属冲突；
    *因为依赖是以函数参数形式注入，使得每个模块加载不同版本（如依赖不同版本的jquery）的脚本成为可能；
    */
    //推荐一个模块为一个单独的js文件；
    无依赖关系的模块：
        模块只是名/值对的集合：
            define({
                name1:'value1',
                name2:'value2'
            })
        无依赖关系，但需要处理一些初始化任务：
            define(function(){
                
            })
        
    有依赖关系的模块：
        define('module name',[],function(){
            //第一个参数为模块名称，可选项--不建议命名；
            //[]表示依赖关系的数组列表；
            //function(){}回调函数，当指定模块都加载成功后被调用；
            //加载的模块以参数形式传入该函数中，从而在回调函数内部就可以使用这么模块；
            //参数和模块的数量和次序要一一对应;
            //或者通过arguments[]来调用依赖；
            //
            //require()加载这个模块之前会先加载依赖关系；
            //模块应该返回一个本模块/函数 return {
            //    属性名：值,
            //    方法名：function(){}
            //模块名默认为脚本文件名；
            //}
            //
        })
        

模块定义的例外：

    对于传统的"browser globals"脚本，无法通过define()表达他们的依赖关系；
    为此，requirejs提供补充方案：
        使用shim config来定义依赖关系；
        

模块名的定义：

    方法一、
        //jQuery库就是通过这种方法命名的；
        在定义模块时通过赋予第一个参数命名--------不推荐；
        
    方法二、
        在主模块中使用require.config
        require.config({
            baseUrl:'',
            paths:{
                'moduleName':'modulePaths'    //路径是以基路径查找；
            }
        })
        //注意：如果通过方法一（如：jQuery）命名了的话，方法二命名（如：myjquery）不会起作用；
        //通过myjquery引用文件\  
        //require(['myjquery'],function($){
        //$ is undefined-----因为myjquery的值是undefined-----jQuery自有名，没有放权赋给myjquery
        //})
        

生成相对于主模块的路径：

    define(['require'],function(require){
        var Url = require.toUrl('files_paths');    
        //files_paths文件类型任意；
        //文件是否存在都行；
        //仅仅是为了获得从该文件开始的相对路径；
    })
    

循环依赖--重构代码重新设计的警示灯

    循环依赖：a依赖b，b同时依赖a
    //不能用一般的方法，否则，b会获取到a=undefined;
    define(["require", "a"],
        function(require, a) {
        
            return function(title) {
                return require("a").doSomething();
            }
        }
    );
    

指定JSONP服务依赖

    //传递参数的值必须为'define'----将获取的值看成一个模块定义（返回的值在底层用define()包裹）；
    //缺点：一旦JSONP服务超时,通过define()定义的其它模块可能不能被执行；
    //缺/优点：requirejs对同一URL地址只获取一次数据，后继请求获取的是缓存的值；
    //超时错误信息：通过requirejs.onError()获取
    require(['http://example.com/api/data.json?callback=define'],function(){
        function(data){
            
        }
    
    })        

调用模块require():

require([],function(){

//[]表示依赖关系的数组列表；
//数组元素为需要调用的模块的路径：相对路径（基于baseUrl/主HTML）、绝对路径、通过paths连接的路径；
//function(){}回调函数，当指定模块都加载成功后被调用；
//加载的模块以参数形式传入该函数中，从而在回调函数内部就可以使用这个模块的属性或方法；
//参数和模块的数量和次序要一一对应;
//或者通过arguments[]来调用依赖；

})        
        

常见错误：

    控制台报错--查找不到脚本文件：
        原因解析：页面内有多个脚本入口，而且加载require.js的script标签设置了data-main属性；
        解决方法：去掉data-main属性，则requirejs根据此属性异步加载主模块中的脚本；
        
    控制台报错--参数undefined
        原因解析：将自有名的模块通过paths属性改名引用；
        解决方法：用自有名引用模块，而不自定义模块名；

关于配置问题：
RequireJS配置笔记